<template>
    <div class="car-list-container">
        <h3>我上传的汽车</h3>
        <el-table :data="carList.cars" border style="width: 100%">
            <el-table-column prop="carname" label="汽车名称" />
            <el-table-column prop="plate" label="车牌号">
            </el-table-column>
            <el-table-column prop="statusDesc" label="状态">

            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="handleView(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页标签 -->
        <div style="width: 95%;margin: 10px auto;">
            <el-pagination background layout="prev, pager, next" v-model:page-size="carForm.pageSize"
                v-model:current-page="carForm.pageNum" :total="carForm.total" @current-change="getCarList" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request'; // 封装的 axios 请求
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router';
let router = useRouter();
//创建stote实例
let store = useUserStore();
const username = store.userinfo.username;



const carList = reactive({
    cars: [],//存放后端查询用户数据变量
})
let carForm = ref({
    uid: 0,
    pageNum: 1,
    pageSize: 8,
    total: 0,
})

// 获取汽车列表数据
const getCarList = async (currentpage) => {
    carForm.value.pageNum = currentpage;
    // 根据姓名查询uid
    let r = await request.get(`/user/findIdByName/${username}`);
    if (r.data.success) {
        carForm.value.uid = r.data.data;
    }
    let res = await request.post('/car/getCarList', carForm.value);
    if (res.data.success) {
        console.log(res.data.data.list);

        carList.cars = res.data.data.list;
    } else {
        ElMessage.error(res.data.msg || '获取汽车列表失败');
    }

};

// 查看操作
const handleView = (row) => {
    ElMessage.info(`查看汽车：${row.carName}`);
    router.push({
        name: "card",
        params: { carid: row.carid },
    })
};

onMounted(() => {
    getCarList(1);
});
</script>

<style scoped>
.car-list-container {
    margin: 20px;
}

h3 {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
</style>